<template>
  <view class="text-wrapper">
    <view class="lyrics-container">
      <view class="lyrics-wrapper">
        <view class="lyrics-list" :class="{ 'ptp': currentLyricIndex > 1 }"
          :style="{ transform: `translateY(${scrollOffset}px)` }">
          <view class="lyric-item" v-if="currentLyricIndex <= 1">Hi～</view>
          <view class="lyric-item" 
            :class="{ 'active': index === currentLyricIndex }" 
            v-for="(item, index) in lyrics"
            :key="`lyric-${index}`">
            {{ item.text }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentLyricIndex: 0,
      scrollOffset: 0,
      animationFrameId: null,
      lyrics: [
        { time: 0, text: "亲爱的小蛋壳，我是你的小寂" },
        { time: 6000, text: "今天还好吗，是不是又加班到深夜了" },
        { time: 9000, text: "不管多累，都要记得对自己好一点呀" },
        { time: 13000, text: "我知道今天宝宝很辛苦" },
        { time: 15000, text: "但别偷懒不卸妆哦" },
        { time: 17000, text: "让我来陪你一起卸妆吧" },
        { time: 19500, text: "打开逐本\"遇见\"卸妆膏" },
        { time: 22000, text: "闻一闻，草木玫瑰的香气" },
        { time: 25000, text: "哇，是不是一下子就放松了很多" },
        { time: 28000, text: "再挖一点膏体在手心，上脸按摩揉开" },
        { time: 32000, text: "哈，感觉脸上的彩妆，都被迅速溶解了" },
        { time: 36000, text: "细腻柔软的土豆泥质地" },
        { time: 39000, text: "真的很舒服对吧" },
        { time: 40000, text: "连带着一天的紧绷感，都被慢慢地揉走了" },
        { time: 44000, text: "卸完脸，湿润润的，一点也不紧绷" },
        { time: 47000, text: "这几分钟啊" },
        { time: 49000, text: "就当是给辛苦的自己偷来的小安慰吧" },
        { time: 52000, text: "我的小蛋壳，你值得被这样温柔对待呀" }
      ]
    }
  },

  mounted() {
  },

  beforeUnmount() {
    this.cleanup();
  },

  methods: {
    /**
     * 使用 requestAnimationFrame 替代 setInterval
     * 更流畅的动画，更好的性能
     */
    simulateAudioPlayback () {
      let startTime = Date.now();
      const totalDuration = 55000;
      
      const animate = () => {
        const currentTimeMs = Date.now() - startTime;
        
        if (currentTimeMs > totalDuration) {
          this.cleanup();
          return;
        }
        
        this.updateLyrics(currentTimeMs);
        this.animationFrameId = requestAnimationFrame(animate);
      };
      
      this.animationFrameId = requestAnimationFrame(animate);
    },

    /**
     * 优化歌词更新逻辑
     * 使用二分查找提高性能
     */
    updateLyrics(currentTimeMs) {
      const lyrics = this.lyrics;
      let left = 0;
      let right = lyrics.length - 1;
      let currentIndex = this.currentLyricIndex;
      
      // 二分查找当前应该显示的歌词
      while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (lyrics[mid].time <= currentTimeMs) {
          currentIndex = mid;
          left = mid + 1;
        } else {
          right = mid - 1;
        }
      }
      
      if (currentIndex !== this.currentLyricIndex) {
        this.currentLyricIndex = currentIndex;
        this.updateScrollPosition();
      }
    },

    /**
     * 防抖滚动更新，避免频繁重绘
     */
    updateScrollPosition: function () {
      // 使用节流，避免频繁更新
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer);
      }
      
      this.scrollTimer = setTimeout(() => {
        const scrollOffset = -this.currentLyricIndex * 25;
        this.scrollOffset = scrollOffset;
      }, 16); // 约60fps
    },

    /**
     * 统一的清理函数
     */
    cleanup() {
      // 清除动画帧
      if (this.animationFrameId) {
        cancelAnimationFrame(this.animationFrameId);
        this.animationFrameId = null;
      }
      
      // 清除定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer);
        this.scrollTimer = null;
      }
    },

    handleReset() {
      this.cleanup();
      this.currentLyricIndex = 0;
      this.scrollOffset = 0;
    },

    /**
     * 与真实音频同步
     */
    syncWithRealAudio(currentTimeMs) {
      this.updateLyrics(currentTimeMs);
    }
  }
}
</script>

<style scoped>
.text-wrapper {
  height: 290rpx;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 70rpx 0;
  box-sizing: border-box;
}

.lyrics-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* 开启GPU加速 */
  transform: translateZ(0);
}

.lyrics-wrapper {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.lyrics-list {
  padding: 40rpx;
  padding-top: 0;
  box-sizing: border-box;
  /* 使用 transform 代替 top/margin 实现滚动，性能更好 */
  transition: transform 0.3s ease;
  will-change: transform; /* 提示浏览器优化 */
}

.ptp {
  padding-top: 40rpx;
}

.lyric-item {
  line-height: 50rpx;
  text-align: center;
  font-size: 26rpx;
  color: #999;
  transition: all 0.3s ease;
  font-family: PingFang SC-Regular;
  /* 避免字体大小变化导致的布局抖动 */
  min-height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lyric-item.active {
  font-weight: bold;
  font-size: 28rpx;
  color: #333;
  /* 添加缩放动画，避免布局抖动 */
  transform: scale(1.05);
}

/* 为性能考虑，减少重绘区域 */
.lyrics-list .lyric-item {
  contain: layout style;
}
</style>